import React, { useEffect, useState } from 'react'
import Echarts from '&/baseUI/EChartsUI'

import './index.scss'

export default function PlanMeasureCont3({data}) {

  const radius1 = [60, 70]
  const radius2 = [50, 70]
  let [option, setOption] = useState({})

  useEffect(() => {

    let is_display = data?.is_display
    let full_implementation_rate = data?.full_implementation_rate || 0
    let partial_implementation_rate = data?.partial_implementation_rate || 0
    let non_implementation_rate = data?.non_implementation_rate || 0
    
    setOption({
      title: [
        {text: '落实情况', left: '50%', top: '5%', textAlign: 'center'},
        {text: '全程落实率', left: '20%', bottom: 0, textAlign: 'center'},
        {text: '部分落实率', left: '50%', bottom: 0, textAlign: 'center'},
        {text: '全程未落实率', left: '80%', bottom: 0, textAlign: 'center'},
      ],
      series: [
          {
              type: 'pie',
              radius: radius1,
              center: ['20%', '50%'],
              labelLine: { show: false },
              data: [ { value: 0, itemStyle: {
                          color: '#00BFFF',
                          opacity: 0.2
                      }, } ]
          },
          {
              name: '占比',
              type: 'pie',
              radius: radius2,
              center: ['20%', '50%'],
              labelLine: {
                show: false
              },
              label: {
                show: true,
                position: 'center',
                fontSize: 20,
                color: '#00BFFF',
                fontWeight: 900,
              },
              data: [{
                      value: full_implementation_rate,
                      name: is_display ? full_implementation_rate + '%' : '/',
                      itemStyle: {
                        color: '#00BFFF',
                        shadowBlur: 30,
                        shadowColor: '#00BFFF',
                        shadowOffsetX: 10,
                      },
                      
                  },
                  {
                      value: 100 - full_implementation_rate,
                      name: is_display ? full_implementation_rate + '%' : '/',
                      itemStyle: {
                          color: "transparent"
                      }
                  }
              ]
          },
          {
              type: 'pie',
              radius: radius1,
              center: ['50%', '50%'],
              labelLine: { show: false },
              data: [ { value: 0, itemStyle: {
                          color: 'orange',
                          opacity: 0.2
                      }, } ]
          },
          {
              name: '占比2',
              type: 'pie',
              radius: radius2,
              center: ['50%', '50%'],
              labelLine: {
                show: false
              },
              label: {
                show: true,
                position: 'center',
                fontSize: 20,
                color: 'orange',
                fontWeight: 900,
              },
              data: [{
                      value: partial_implementation_rate,
                      name: is_display ? partial_implementation_rate + '%' : '/',
                      itemStyle: {
                          color: "orange",
                          shadowBlur: 30,
                          shadowColor: 'orange',
                          shadowOffsetX: 10,
                      },
                      
                  },
                  {
                      value: 100 - partial_implementation_rate,
                      name: is_display ? partial_implementation_rate + '%' : '/',
                      itemStyle: {
                          color: "transparent"
                      }
                  }
              ]
          },
          {
              type: 'pie',
              radius: radius1,
              center: ['80%', '50%'],
              labelLine: { show: false },
              data: [ { value: 0, itemStyle: {
                          color: '#7FFFAA',
                          opacity: 0.2
                      }, } ]
          },
          {
              name: '占比3',
              type: 'pie',
              radius: radius2,
              center: ['80%', '50%'],
              labelLine: {
                show: false
              },
              label: {
                show: true,
                position: 'center',
                fontSize: 20,
                color: '#7FFFAA',
                fontWeight: 900,
              },
              data: [{
                      value: non_implementation_rate,
                      name: is_display ? non_implementation_rate + '%' : '/',
                      itemStyle: {
                          color: "#7FFFAA",
                          shadowBlur: 30,
                          shadowColor: '#7FFFAA',
                          shadowOffsetX: 10,
                      },
                      
                  },
                  {
                      value: 100 - non_implementation_rate,
                      name: is_display ? non_implementation_rate + '%' : '/',
                      itemStyle: {
                          color: "transparent"
                      }
                  }
              ]
          },
      ]
    })
  }, [data])

  return <div className='plan-measure-content-3'>
    <div><Echarts option={option}/></div>
    
  </div>
}
